<template>
  <div class="task-list-container">
    <CPageTable @register="registerPage" v-model:search-form="searchForm">
      <template #headerRightButton>
        <el-button
          type="primary"
          @click="handleRegister"
          v-btnPermission="'TAA_VIEW_REGISTER_TRADING'"
          ><CIcon type="c-xian-xinjian" class="g-mr4"></CIcon>碳交易登记</el-button
        >
      </template>
      <template #searchBarPlaceholder>
        <span class="assets-unit"> 资产单位：tCO₂ </span>
      </template>
      <template #carbonQuota="{ scope }">
        <div class="g-flex-end-center">
          <div>
            <span>{{ empty(scope.row.carbonQuota) }}</span>
          </div>
          <el-popover ref="popoverRef" placement="right" :width="300" trigger="click">
            <template #reference>
              <CIcon
                type="c-xian-gengduoxinxi"
                class="g-ml5 genduo-icon-style"
                @click="handleShowPopover(scope.row.assetNo)"
              ></CIcon>
            </template>
            <div v-loading="popoverLoading">
              <el-table :data="popoverData" style="width: 100%">
                <el-table-column prop="year" label="年份">
                  <template #default="scope">
                    <span>{{ empty(scope.row.year) }}</span>
                    <span class="g-font-12n2"> 年</span>
                  </template>
                </el-table-column>
                <el-table-column prop="carbonQuota" label="可用额度">
                  <template #default="scope">
                    <span>{{ empty(scope.row.carbonQuota) }}</span>
                    <span class="g-font-12n2"> tCO₂</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-popover>
        </div>
      </template>
      <template #op="{ scope }">
        <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
      </template>
    </CPageTable>
    <CarbonAssetRegisterDialog
      v-model:visible="registerDialogVisible"
      @refresh="refresh"
    ></CarbonAssetRegisterDialog>
    <AccountChangeRecord
      v-model:visible="recordDialogVisible"
      :assetNo="assetNo"
      :assetDepartment="assetDepartment"
    ></AccountChangeRecord>
    <AddAccountDialog
      v-model:visible="addAccountVisible"
      :assetNo="assetNo"
      :assetDepartment="assetDepartment"
      :orgCode="addAccountOrgCode"
      @refresh="refresh"
    />
  </div>
</template>
<script lang="ts">
export default {
  name: 'CarbonAssetAccount'
};
</script>
<script lang="ts" setup>
import { ref, reactive, Ref } from 'vue';
import CarbonAssetRegisterDialog from './components/CarbonAssetRegisterDialog/index.vue';
import AccountChangeRecord from './components/AccountChangeRecord/index.vue';
import AddAccountDialog from './components/AddAccountDialog/index.vue';
import { CPageTable, useCPageTable, CPageTableProps } from '@/components/CPageTable';
import { CTableButtonGroup } from '@/components/CTable';
import type { TableButtonItem } from '@/components/CTable';
import { useTableList } from './useTableList';
import { getAllowanceByYear } from '@/apis/taa/asset/account';
import {
  GetAccountListResult,
  GetAllowanceByYearResult
} from '@/apis/taa/asset/model/accountModel';
import { empty } from '@/utils';

const { searchForm, tableOptions, tableFieldsSetting } = useTableList(handleExpandAll);
const options = reactive<CPageTableProps>({
  title: '碳资产账户',
  tableOptions,
  tableFieldsSetting,
  enableFieldsSetting: true
});
const [registerPage, { refresh, operationTable }] = useCPageTable(options);

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: GetAccountListResult): TableButtonItem[] {
  const res = [
    {
      text: '账户变动记录',
      btnPermission: 'TAA_VIEW_ACCOUNT_CHANGE_RECORD',
      onClick: () => handleShowRecord(row)
    }
  ];
  if (row.assetAccountType === 'MASTER') {
    res.push({
      text: '新增子账户',
      btnPermission: 'TAA_ASSET_ACCOUNT_SUB_ADD',
      onClick: () => handleAddAccount(row)
    });
  }
  return res;
}

const registerDialogVisible = ref(false);
const handleRegister = () => {
  registerDialogVisible.value = true;
};

const popoverLoading = ref(false);
const popoverData = ref<GetAllowanceByYearResult[]>([]);
const handleShowPopover = async (assetNo: string) => {
  popoverLoading.value = true;
  const data = await getAllowanceByYear(assetNo);
  popoverData.value = data || [];
  popoverLoading.value = false;
};

const recordDialogVisible = ref(false);
const assetNo = ref('');
const assetDepartment = ref('');
const handleShowRecord = (row: GetAccountListResult) => {
  assetNo.value = row.assetNo;
  assetDepartment.value = row.assetDepartment;
  recordDialogVisible.value = true;
};

const addAccountVisible = ref(false);
const addAccountOrgCode = ref('');
const handleAddAccount = (row: GetAccountListResult) => {
  assetNo.value = row.assetNo;
  addAccountOrgCode.value = row.organizationCode;
  assetDepartment.value = row.assetDepartment;
  addAccountVisible.value = true;
};

function handleExpandAll() {
  console.log('handleExpandAll');
  setTimeout(() => {
    operationTable((tableRef: Ref<any>) => {
      console.log('tableRef', tableRef.value);
      tableRef.value.setAllTreeExpand(true);
    });
  }, 0);
}
</script>

<style lang="scss" scoped>
.genduo-icon-style {
  color: #96a7b3;
  cursor: pointer;
  &:hover {
    color: #308bf2;
  }
}
.assets-unit {
  font-size: 14px;
  font-weight: 400;
  color: #7a8a99;
  white-space: nowrap;
}
</style>
